<template>
  <div class="pageBox">
    <div class="table_component">
      <OdcSearchTable
        ref="formTableRef"
        :column="column"
        action-label="操作"
        labelWidth="70px"
        :form-config="searchFormConfig"
        :form-data="searchForm"
        :searchDelFields="searchDelFields"
        :http-request="getList"
        :showCheckbox="true"
        :border="true"
        :tags="tags"
        tagField="type"
        labelPosition=""
        actionColumnWidth="120"
        actionColumnFixed="right"
        :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
        rowKey="id"
        @selectionChange="selectionChange"
        @cascaderChange="cascaderChange"
        @selectChange="selectChange"
      >
        <template>
          <div slot="btnSlot" class="btnSlot_sty">
            <div>
              <el-button
                type="success"
                size="small"
                plain
                icon="el-icon-plus"
                @click="openDrawer"
                >添加</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-upload"
                plain
                size="small"
                @click="headleImport"
                >导入</el-button
              >
              <el-button type="" size="small" @click="exportList"
                >导出</el-button
              >
            </div>
            <div>
              <el-button
                type="primary"
                size="small"
                @click="$refs.formTableRef.request()"
                >查询</el-button
              >
              <el-button size="small" @click="$refs.formTableRef.handleReset()"
                >重置</el-button
              >
            </div>
          </div>
        </template>
        <template v-slot:id="scope">
          <svg-icon
            icon-class="nested"
            class-name="icon"
            style="height: 25px; width: 16px; color: blue"
          />
        </template>
        <template v-slot:actionBtn="scope">
          <div class="tableBtn">
            <el-button
              type="text"
              size="mini"
              @click="openDrawerDetail(scope.row)"
              >详情</el-button
            >
            <el-button type="text" size="mini" @click="openDrawer(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="mini" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </OdcSearchTable>
      <AddDrawer
        ref="addDrawer"
        size="900px"
        :drawTitle="title"
        @closeDrawer="handleClose"
      >
        <div class="form_content">
          <OdcFormRender
            ref="formRef"
            label-width="85px"
            :disabled="disabled"
            :form-config="addFormConfig"
            :form-data="addFormData"
            :rules="addRules"
            :gutter="30"
          >
          </OdcFormRender>
          <div slot="operate" class="footer">
            <el-button
              class="btn"
              @click="handleClose"
              :loading="loading"
              :disabled="loading"
              >取消</el-button
            >
            <el-button
              class="btn"
              type="primary"
              @click="save"
              :loading="loading"
              :disabled="loading"
              >确定</el-button
            >
          </div>
          <div v-if="showLoading" class="loadingBox">
            <img src="@/assets/images/jiaz_pic.png" class="jzzImg" alt="" />
            <div class="loadingTips">正在加载数据</div>
          </div>
        </div>
      </AddDrawer>
      <ImportFile
        ref="importFile"
        :title="improtTitle"
        :import-url="importUrl"
        :requestUrl="breedTemplateUplaod"
        @clickConfirm="headleImportFile"
        @headleDownLoad="headleDownLoadTep"
      />
    </div>
  </div>
</template>

<script>
import { column, searchFormConfig, addFormConfig, addRules } from "./data";
import {
  getList,
  getInfo,
  edit,
  add,
  remove,
  breedTemplateUplaod,
} from "@/api/technocracy";
import { getBlobFile } from "@/api/common";
import { downloadBlobFile, exportFile } from "@/utils/index";
import { cascadeLoads, reSortCheckedCascader } from "@/utils/dataOperation";

export default {
  name: "Technocracy",
  components: {},
  data() {
    return {
      uploadSuccess: false,
      dialogVisible: false,
      showDictionary: true,
      drawerVisible: false,
      showLoading: false,
      loading: false,
      disabled: false,
      // 列字段
      column,
      // 查询表单配置
      searchFormConfig,
      searchForm: {
        specialistName: null,
        specialistPhone: null,
        grade: null,
        specialistSort: null,
        excellentDomain: null,
        serviceDomain: null,
        STREETES: [],
        STREETES1: [],
        STREETES2: [],
        type: "1",
      },
      searchDelFields: ["STREETES", "SERVD", "type"],
      // 新增/编辑表单配置
      addFormConfig,
      addFormData: {
        specialistName: "",
        specialistPhone: "",
        specialistSort: "",
        SPES: [],
        excellentDomain: "",
        EXCELD: [],
        serviceDomain: "",
        SERVD: [],
        residentPlace: "",
        specialistType: "",
        specialistGender: "",
        appointUnit: "",
        specialistDuty: "",
        serviceDate: "",
        specialistUrl: "",
        specialistUrls: [],
        introduce: "",
        achievement: "",
      },
      importUrl: "", // 导入地址
      improtTitle: "", // 导入标题
      addRules,
      // 列表接口
      // getList,
      breedTemplateUplaod,
      // 新增/编辑标题
      title: "添加",
      id: "",
      dialogImageUrl: "",
      countryList: [],
      successData: {},
      tags: [
        {
          label: "年度",
          value: "1",
        },
        {
          label: "季度",
          value: "2",
        },
        {
          label: "月",
          value: "3",
        },
      ],
    };
  },
  watch: {
    // 监听时间范围选择数据
    "searchForm.DATE_RANGE": {
      handler(val) {
        const [StartDate, EndDate] = val || [];
        this.searchForm.originTimeStartStr = StartDate || "";
        this.searchForm.originTimeEndStr = EndDate || "";
      },
    },
  },
  async mounted() {},
  methods: {
    // 打开新增/编辑
    openDrawer(row) {
      this.disabled = false;
      if (row.id) {
        this.title = "编辑";
        // this.getInfo(row.id);
      } else {
        this.title = "添加";
        this.addFormData.id = "";
      }
      this.$refs.addDrawer.open();
    },
    // 打开详情弹窗
    openDrawerDetail(row) {
      this.title = "详情";
      // this.getInfo(row.id);
      this.disabled = true;
      this.$refs.addDrawer.open();
    },
    getList() {
      return new Promise((resolve) => {
        const res = {
          total: 5,
          rows: [
            {
              id: "1781253733071708161",
              openid: "112",
              wxName: "李四",
              avatar: null,
              gender: 1,
              xyCode: null,
              city: null,
              phone: "123456238901",
              enterprise: null,
              wxPro: null,
              realName: null,
              birthday: null,
              longitude: "ex",
              latitude: "ip",
              children: [
                {
                  id: "1781259533071708161",
                  openid: "112",
                  wxName: "李四",
                  avatar: null,
                  gender: 1,
                  xyCode: null,
                  city: null,
                  phone: "123456238901",
                  enterprise: null,
                  wxPro: null,
                  realName: null,
                  birthday: null,
                  longitude: "ex",
                  latitude: "ip",
                },
              ],
            },
            {
              id: "1781254273834860546",
              openid: "111",
              wxName: "张三",
              avatar: null,
              gender: 2,
              xyCode: null,
              city: null,
              phone: "12345678901",
              enterprise: null,
              wxPro: null,
              realName: null,
              birthday: null,
              longitude: "107.682507",
              latitude: "23.175039",
            },
            {
              id: "1781255653383421953",
              openid: "oQyId0XiUEr6nu_FSeberx81Igv0",
              wxName: "微信用户",
              avatar:
                "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
              gender: 0,
              xyCode: null,
              city: null,
              phone: "18693123406",
              enterprise: null,
              wxPro: null,
              realName: null,
              birthday: null,
              longitude: "108.94878",
              latitude: "34.22259",
            },
            {
              id: "1783045902971764738",
              openid: "oQyId0c4A77QnSljDvYplOCzQAd8",
              wxName: "微信用户",
              avatar:
                "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
              gender: 0,
              xyCode: null,
              city: null,
              phone: "13944806296",
              enterprise: null,
              wxPro: null,
              realName: null,
              birthday: null,
              longitude: null,
              latitude: null,
            },
            {
              id: "1783085532983586817",
              openid: "oQyId0W5jTl9lJrBAaqe0tEn53Jg",
              wxName: "微信用户",
              avatar:
                "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
              gender: 0,
              xyCode: null,
              city: null,
              phone: "15829076401",
              enterprise: null,
              wxPro: null,
              realName: null,
              birthday: null,
              longitude: null,
              latitude: null,
            },
          ],
          code: 200,
          msg: "查询成功",
        };
        resolve(res);
      });
    },
    // 导出
    exportList() {
      exportFile(
        "/platform/specialistDetails/export",
        { ...this.searchForm },
        `专家管理列表`
      );
    },
    //获取详情
    getInfo(id) {
      this.showLoading = true;
      getInfo({ id })
        .then((res) => {
          if (res.code == 200) {
            // 处理级联选择数据
            let serviceDomains = res.data.serviceDomain.split(",");
            this.addFormData = {
              ...res.data,
              //返回联级最后一级字符串id，处理成联级数组
              SERVD: cascadeLoads(
                this.countryList, //联级数据
                reSortCheckedCascader(serviceDomains, this.countryList),
                true
              ),
            };
          }
        })
        .finally(() => {
          this.showLoading = false;
        });
    },
    // 选择行
    selectionChange(val) {
      const ids = val.map((item) => item.id);
      this.id = ids.join(",");
    },
    // 新增/编辑保存
    save() {
      this.$refs.formRef.submitForm(() => {
        const save = this.addFormData.id ? edit : add;
        save(this.addFormData)
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.handleClose();
              this.$refs.formTableRef.request();
              this.loading = false;
            }
          })
          .finally((err) => {
            this.loading = false;
          });
      });
    },
    // 关闭新增/编辑
    handleClose() {
      this.$refs.formRef.resetForm();
      this.$refs.addDrawer.closed();
      this.addFormData.id = "";
    },
    // 删除
    handleDel(row) {
      this.$confirm("是否删除该条数据?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove(row.id).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.$refs.formTableRef.request();
            }
          });
        })
        .finally(() => {});
    },
    // 导入弹窗
    headleImport() {
      this.$refs.importFile.init();
      this.improtTitle = "专家管理导入";
      this.importUrl =
        process.env.VUE_APP_BASE_API + "/breed/typeSource/import";
    },
    // 导入提交
    headleImportFile(val, data) {
      if (!val) {
        // 关闭弹窗并刷新列表
        this.$refs.importFile.resetForm();
        this.$refs.formTableRef.request();
      } else {
        this.$refs.formTableRef.request();
      }
    },
    // 下载模板
    headleDownLoadTep() {
      getBlobFile(
        "/platform/specialistDetails/exportTemplate",
        {},
        "post"
      ).then((res) => {
        downloadBlobFile(res, "xlsx", "专家管理模板");
      });
    },
    // 下载导入失败数据
    headleLoadFailData(id) {
      const param = {
        clientid: id,
      };
      getBlobFile(
        "/platform/specialistDetails/exportImportLogsExcel",
        param,
        "post"
      ).then((res) => {
        downloadBlobFile(res, "xlsx", "专家管理导入失败数据");
      });
    },
    // 级联选择返回的数据
    cascaderChange(row) {
      console.log(row, "cascaderChange");
      this.searchForm.serviceDomain =
        row
          .map((item) => {
            return item.value;
          })
          .join(",") || "";
    },
    // 下拉选择返回的数据
    selectChange(row) {
      console.log(row, "selectChange");
      if (row.prop == "STREETES") {
        this.searchForm.specialistSort = row.val.join(",") || "";
      }
      if (row.prop == "STREETES1") {
        this.searchForm.excellentDomain = row.val.join(",") || "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.btnSlot_sty {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>